<template>
  <div class="login-button">

    <!--    登陆主页面-->
    <el-button type="primary" v-if="$store.state.login == '0'" @click="dialogFormVisible = true">会员登录</el-button>
    <el-dropdown v-else>
      <span class="el-dropdown-link">
        你好，{{
          this.userInfo.firstNameCn ? this.userInfo.firstNameCn + this.userInfo.lastNameCn : '会员'
        }}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item><span @click="logout">退出登录</span></el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-dialog
        custom-class="dialogClass"
        :title="isLogin ? '登录' : '注册'"
        :visible.sync="dialogFormVisible"
        center
        append-to-body
        width="620px"
        @close="closeDialog"
    >
      <!--      登陆主页-->
      <div class="login-box" key="1" v-if="isLogin">
        <!-- 模态框 -->
        <div class="modal-content">
          <!-- 模态框主体 -->
          <div class="modal-body pb-0">
            <div class="row ">
              <!-- 左侧 -->
              <div class="col-4 border-right border-bottom ">
                <div class="row mt-2">
                  <div class="loader"><img src="favicon.ico" alt=""></div>
                  <div class="loader-text">
                    <div>迅</div>
                    <div>盾</div>
                    <div>互</div>
                    <div>联</div>
                  </div>
                </div>

              </div>
              <!-- 右侧 -->
              <div class="col border-bottom pl-4" style="width: 200px;">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs border-0 " v-if="active">
                  <li class="nav-item">
                    <a class="nav-link text-muted font-weight-bolder border-0" data-toggle="tab"
                       href="#loginPane">账号登录</a>
                  </li>
                  <li class="nav-item" @click="active=false">
                    <a class="nav-link text-muted  border-0 my-nav-link" data-toggle="tab" href="#emailPane">验证码登录</a>
                  </li>
                </ul>

                <ul class="nav nav-tabs border-0 " v-else>
                  <li class="nav-item" @click="active=true">
                    <a class="nav-link text-muted  border-0" data-toggle="tab" href="#loginPane">账号登录</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link text-muted font-weight-bolder  border-0 my-nav-link" data-toggle="tab"
                       href="#emailPane">验证码登录</a>
                  </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                  <div id="loginPane" class="tab-pane active">
                    <el-form ref="loginForm" :model="loginForm">
                      <el-form-item prop="username">
                        <div class="form-group mt-4 input-group">
                                                    <span class="input-group-prepend">
														<span class="input-group-text el-icon-user"
                                  style="justify-content: center;display: flex"> </span>
                                                    </span>
                          <input v-model="loginForm.username" class="form-control form-control-range text-muted"
                                 placeholder="手机号/邮箱/证件号"/>
                        </div>
                      </el-form-item>
                      <el-form-item prop="password">
                        <div class="form-group input-group">
                                                    <span class="input-group-prepend">
														<span class="input-group-text el-icon-unlock"
                                  style="justify-content: center;display: flex"></span>
                                                    </span>
                          <input v-model="loginForm.password" type="password" @keyup.enter="handleLogin"
                                 class="form-control form-control-range" placeholder="密码"/>
                          <a v-show="false" href="javascript:;" class="position-absolute " style="right: 30px; color: #000000;">忘记密码？</a>
                        </div>
                      </el-form-item>

                      <el-form-item>
                        <div>
                          <button @click.prevent="handleLogin"
                                  class="btn btn-block btn-primary"><span
                              v-if="!loading">登 录</span><span v-else><span class="el-icon-loading"></span>&nbsp;登 录 中...</span>
                          </button>
                        </div>
                      </el-form-item>
                    </el-form>
                  </div>

                  <div id="emailPane" class="tab-pane"><br>
                    <el-form ref="loginForm" :model="loginForm">
                      <div class="form-group  position-relative ">
                        <el-form-item prop="email">
                          <div class="form-group mt-1 input-group">
                                                    <span class="input-group-prepend">
														<span class="input-group-text" style="justify-content: center;display: flex"> @ </span>
                                                    </span>
                            <input class="form-control form-control-range text-muted" v-model="loginForm.email"
                                   placeholder="请输入邮箱"/>
                          </div>
                        </el-form-item>
                      </div>
                      <el-form-item prop="authCode">
                        <div class="form-group position-relative ">
                          <input class="form-control form-control-range" v-model="loginForm.authCode"
                                 placeholder="验证码"/>
                          <el-button slot="append" style="position: absolute;right: 0;top: 0px;height: 38px" type="info"
                                     plain :disabled="btnBoolean"
                                     @click="handleSendAuthCode(loginForm.email)">
                            {{ sendEmailBtn }}
                          </el-button>
                        </div>
                      </el-form-item>

                      <el-form-item>
                        <div>
                          <button @click.prevent="handleLoginByEmail"
                                  class="btn btn-block btn-primary"><span
                              v-if="!loading">登 录</span><span v-else><span class="el-icon-loading"></span>&nbsp;登 录 中...</span>
                          </button>
                        </div>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 模态框底部 -->
          <div class="modal-footer">
            迅盾互联团队
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { sendAuthCode } from '@/api/common'
import {getMemberInfo} from "@/api/member/member";
import Cookies from 'js-cookie'

export default {
  name: "Login",
  dicts: ['occupation_class', 'id_type', 'member_type'],
  data() {
    return {
      sendEmailBtn: "获取验证码",
      btnBoolean: false,
      countDown: null,
      EmailTimer: null,
      active: true,
      userInfo: {},
      dialogFormVisible: false,
      isLogin: true,
      loading: false,
      loginForm: {
        username: "",
        password: "",
        email: "",
        authCode: ""
      }
    };
  },
  computed: {
    ...mapGetters(["token", "user"]),
  },
  mounted() {
    getMemberInfo().then(res => {
      if (res) {
        this.$store.commit('set_login', '1')
        this.userInfo = res.data
      } else {
        this.$store.commit('set_login', '0')
      }
    })
  },
  methods: {
    /* 发送邮箱验证码 */
    handleSendAuthCode(email) {
      sendAuthCode(email).then((res) => {
        this.countDown = 60;
        if (res.code == 200) {
          this.$message(res.msg)
          this.btnBoolean = true;
          this.sendEmailBtn = "重新获取(" + this.countDown + ")"
          this.EmailTimer = setInterval(() => {
            if (this.countDown == 1) {
              clearInterval(this.EmailTimer)
              this.sendEmailBtn = "重新获取";
              this.btnBoolean = false;
              return;
            }
            this.countDown--;
            this.sendEmailBtn = "重新获取(" + this.countDown + ")";
          }, 1000);
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    /* 登录 */
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store
              .dispatch("login", this.loginForm)
              .then(() => {
                this.dialogFormVisible = false;
                this.$store.dispatch("getMemberInfo").then(res => {
                  this.userInfo = res.data
                  this.$store.commit('set_login', '1')
                  if(this.userInfo.serviceEnv == 'A') {
                    Cookies.set('uvid', 'prod')
                  } else {
                    Cookies.set('uvid', 'gray')
                  }
                })
              })
              .finally(() => {
                this.loading = false;
              });
        } else {
          return false;
        }
      });
    },
    /* 邮箱验证码登录 */
    handleLoginByEmail() {
      /* 用户邮箱验证码登录 */
      this.$store
          .dispatch("loginByEmail", this.loginForm)
          .then(() => {
            this.dialogFormVisible = false;

            this.$store.dispatch("getMemberInfo").then(res => {
              this.userInfo = res.data
              this.$store.commit('set_login', '1')
              if(this.userInfo.serviceEnv == 'A') {
                Cookies.set('uvid', 'prod')
              } else {
                Cookies.set('uvid', 'gray')
              }
            })
          })
          .finally(() => {
            this.loading = false;
          });
    },
    logout() {
      this.$confirm("是否确认退出登录？", "提示", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
          .then(() => {
            this.$store.dispatch("logout");
            this.$store.commit('set_login', '0')
            this.$router.push("/")
          })
          .then(() => {
          })
          .catch(() => {
          });
    },
    closeDialog() {
      this.isLogin = true;
      this.loginForm = {
        username: "",
        password: "",
      };
      this.registerForm = {
        idType: "A",
        firstNameCn: "",
        lastNameCn: "",
        firstNameEn: "",
        lastNameEn: "",
        idCardNumber: "",
        idDueDate: "",
        email: "",
        verificationCode: "",
        mpassword: "",
        mrePassword: "",
        telephoneNumber: "",
        nationality: "",
        occupationClass: "",
      };
      if (this.$refs.loginForm) {
        this.$refs.loginForm.clearValidate();
      }
      if (this.$refs.registerForm) {
        this.$refs.registerForm.clearValidate();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.modal-content {
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0) !important;
}

/* 旋转loading的外圈 */
.loader {
  width: 150px;
  height: 150px;
  border: 3px solid transparent;
  border-top-color: rgb(233, 236, 239);
  /* 相对定位 居中 */
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -75px;
  margin-top: 10px;
  z-index: 2;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 执行旋转动画 */
  animation: spin 1.7s linear infinite;
}

/* 旋转loading的中圈 */
.loader::before {
  content: "";
  /* 绝对定位 */
  position: absolute;
  top: 5px;
  left: 5px;
  bottom: 5px;
  right: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: rgb(233, 236, 239);
  /* 执行反向的旋转动画 reverse:反向 */
  animation: spin 0.6s linear infinite reverse;
}

/* 旋转loading的内圈 */
.loader::after {
  content: "";
  /* 绝对定位 */
  position: absolute;
  top: 15px;
  left: 15px;
  bottom: 15px;
  right: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: rgb(233, 236, 239);
  /* 执行旋转动画 */
  animation: spin 1s linear infinite;
}

/* logo */
.loader img {
  width: 55%;
  height: 55%;
  /* 执行反向的旋转动画,时长必须和外圈的动画一致(不让其跟着旋转) */
  animation: spin 1.7s linear infinite reverse;
}

.loader-text {
  width: 30%;
  height: 36px;
  /* 绝对定位 水平居中 */
  position: absolute;
  top: 68%;
  left: 54%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 防止选取 */
  user-select: none;
}

.loader-text div {
  width: 30px;
  height: 36px;
  border-top-color: #ffffff;
  font-size: 22px;
  display: inline;
  margin-left: 2px;
  color: rgb(105, 106, 108);
}

/* 最后面的三个圆 */
.loader-text div:nth-child(8)::before,
.loader-text div:nth-child(9)::before,
.loader-text div:nth-child(10)::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
}

/* 最后面的三个圆的投影 */
.loader-text div:nth-child(8)::after,
.loader-text div:nth-child(9)::after,
.loader-text div:nth-child(10)::after {
  left: 0;
  margin-left: 0;
}

/* 旋转动画 */
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.login-button {
  position: relative;
  margin-left: auto;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.one-row {
  display: flex;

  ::v-deep .el-form-item__content {
    flex: 1;
    margin-right: 35px;
  }
}

.data-box {
  ::v-deep input {
    width: 217px;
  }
}
</style>
